/**
 * dark-blue 主题下的 Element Plus SCSS 变量
 * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
 */

 @use "sass:map";
 @use "sass:math";
 @use "element-plus/theme-chalk/src/mixins/function.scss" as *;
 @use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
 @use "element-plus/theme-chalk/src/mixins/mixins.scss" as *;
 @use "./variables.scss" as *;

 // 生成指定颜色的明亮/黑暗颜色
 @mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
   $colors: map.deep-merge(
     (
       $type: (
         "#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
       )
     ),
     $colors
   ) !global;
 }

 $types: primary, success, warning, danger, error, info;

 $color: $theme-color;
 $success: #01efb7bb;

 $colors: () !default;
 $colors: map.deep-merge(
   (
     "white": #ffffff,
     "primary": (
       "base": $color
     ),
     "success": (
       "base": $success
     )
   ),
   $colors
 );

 // text
 $text-color-base: #fff;
 $text-color: () !default;
 $text-color: map.merge(
   (
     "primary": rgba($text-color-base, 0.8),
     "regular": rgba($text-color-base, 0.8),
     "secondary": rgba($text-color-base, 0.8),
     "placeholder": rgba($text-color-base, 0.8),
     "disabled": rgba($text-color-base, 0.3)
   ),
   $text-color
 );

 // 生成 --el-color-${type}-light-i
 @each $type in (primary) {
   @for $i from 1 through 9 {
     @include set-color-mix-level($type, $i, "light", #021633);
   }
   // --el-color-${type}-dark-2
   @include set-color-mix-level($type, 2, "dark", #000);
 }

 // border
 $border: () !default;
 $border: map.merge(
   (
     "": #01efb755,
     "light": #01efb755,
     "lighter": #01efb755
   ),
   $border
 );

 // fill
 $fill-color: () !default;
 $fill-color: map.merge(
   (
     "": #01efb710,
     "light": #01efb710,
     "blank": #031e47
   ),
   $fill-color
 );

 // background
 $bg-color: () !default;
 $bg-color: map.merge(
   (
     "": #021633,
     "overlay": #031e47
   ),
   $bg-color
 );

 // mask
 $mask-color: () !default;
 $mask-color: map.merge(
   (
     "": rgba(0, 0, 0, 0.5)
   ),
   $mask-color
 );

 // button
 $button: () !default;
 $button: map.merge(
   (
     "disabled-text-color": rgba(255, 255, 255, 0.5)
   ),
   $button
 );

 html.dark-blue {
   @include set-css-color-type($colors, "primary");
   @include set-component-css-var("text-color", $text-color);
   @include set-component-css-var("border-color", $border);
   @include set-component-css-var("fill-color", $fill-color);
   @include set-component-css-var("bg-color", $bg-color);
   @include set-component-css-var("mask-color", $mask-color);
   @include b(button) {
     @include set-component-css-var("button", $button);
   }
 }
